import './TempPlaceholder.scss'
import { LayoutDeftula } from '../Config/LayoutDeftula'
import { ColorCallBack, getNestedValue, assemblyDataA01 } from '../Utils'

import { VideoTempA01 } from '../Utils/VideoTemp'

const TempPlaceholderA02 = ({ config }) => {
    const configuration = config || LayoutDeftula.PlaceholderA02

    const { align_items, align_content, justify_content, flex_direction, flex_wrap,
        backType, backColor, backColor__Deg, backImage, backVideo, backVideoStart, backVideoEND,
        extraRender, textList = [],
        frontMargin, frontStyle, frontWidth, frontHeight,
        backPadding, backMargin, borderRadius, borderSize, borderType, borderColor,
        fill, fillDeg, fontSize, fontFamily, fontWeight, fontStyle, shadowX, shadowY, shadowS, shadowC,
    } = configuration

    const flexStyle = {
        '--alignItems': align_items,
        '--justifyContent': justify_content,
        '--flexDirection': flex_direction,
        '--alignContent': align_content,
        '--flexWrap': flex_wrap,
    }

    return (
        <div className='TempPlaceholderA02' style={flexStyle}>
            <div className='Back'>
                {backType === 'color' && <div className='Color' style={{ background: ColorCallBack(backColor, backColor__Deg) }} />}
                {backType === 'image' && <img className='Image' src={backImage} alt='背景图片' />}
                {backType === 'video' && <VideoTempA01 url={backVideo} seekTimeStart={backVideoStart} seekTimeEnd={backVideoEND} />}
            </div>
            {textList.map((item, index) => {
                if (extraRender === 'text' || extraRender === 'color') {
                    const textStyle = {
                        '--background': extraRender === 'text' ? ColorCallBack(fill, fillDeg) : ColorCallBack(item.color, item.colorDeg),
                        fontSize: fontSize,
                        fontFamily: fontFamily,
                        fontWeight: fontWeight,
                        fontStyle: fontStyle,
                        filter: `drop-shadow(${shadowX}px ${shadowY}px ${shadowS}px ${shadowC})`
                    }
                    return (
                        <div className='Text' key={index} style={textStyle}>{item.text}</div>
                    )
                }
                if (extraRender === 'back') {
                    const backStyle = {
                        padding: backPadding.split(',').map(num => num + 'px').join(' '),
                        margin: backMargin.split(',').map(num => num + 'px').join(' '),
                        background: ColorCallBack(item.color, item.colorDeg),
                        border: `${borderSize}px ${borderType} ${borderColor}`,
                        borderRadius: borderRadius,
                    }
                    const textStyle = {
                        '--background': ColorCallBack(fill, fillDeg),
                        fontSize: fontSize,
                        fontFamily: fontFamily,
                        fontWeight: fontWeight,
                        fontStyle: fontStyle,
                        filter: `drop-shadow(${shadowX}px ${shadowY}px ${shadowS}px ${shadowC})`
                    }
                    return (
                        <div className='textBack' key={index} style={backStyle}>
                            <div style={textStyle}>{item.text}</div>
                        </div>
                    )
                }
                if (extraRender === 'front') {
                    const boxStyle = {
                        background: ColorCallBack(item.color, item.colorDeg),
                        width: frontWidth,
                        height: frontHeight,
                        borderRadius: frontStyle === 'square' ? 0 : '50%',
                        marginRight: frontMargin
                    }
                    const textStyle = {
                        '--background': ColorCallBack(fill, fillDeg),
                        fontSize: fontSize,
                        fontFamily: fontFamily,
                        fontWeight: fontWeight,
                        fontStyle: fontStyle,
                        filter: `drop-shadow(${shadowX}px ${shadowY}px ${shadowS}px ${shadowC})`
                    }
                    return (
                        <div className='Front' key={index} >
                            <div style={boxStyle} />
                            <div style={textStyle}>{item.text}</div>
                        </div>
                    )
                }
            })}
        </div>
    );
};

export default TempPlaceholderA02;